<template>
  <div class="right-menu" :class="{ collapsed }">
    <div v-if="!collapsed">
      <div class="menu-header">常用工具
        <el-button class="collapse-btn" @click="collapsed = true" circle size="small" :icon="ArrowRight" title="收起"/>
      </div>
      <div class="tools-section">
        <el-button class="tool-btn" type="success" plain icon="el-icon-link">快速导航</el-button>
      </div>
      <div class="actions-section">
        <div class="actions-title">常用操作</div>
        <div class="actions-list">
          <div class="action-card">智能问诊</div>
          <div class="action-card">材料审查</div>
          <div class="action-card">生成程序建议</div>
          <div class="action-card">生成程序说明</div>
        </div>
      </div>
      <div class="faq-section">
        <div class="faq-title">常见问题</div>
        <div class="faq-list">
          <div class="faq-item">如何上传材料？</div>
          <div class="faq-item">如何联系客服？</div>
          <div class="faq-item">办理进度如何查询？</div>
        </div>
      </div>
    </div>
    <div v-else class="expand-bar">
      <el-button class="expand-btn" @click="collapsed = false" circle size="large" :icon="ArrowLeft" title="展开"/>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ArrowRight, ArrowLeft } from '@element-plus/icons-vue'
const collapsed = ref(false)
</script>

<style scoped>
.right-menu {
  width: 240px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #e6e6e6;
  transition: width 0.2s;
  position: relative;
  overflow-y: auto;
}
.right-menu.collapsed {
  width: 48px;
  min-width: 48px;
  padding: 0;
  overflow: hidden;
}
.menu-header {
  padding: 20px 20px 10px 20px;
  font-size: 18px;
  font-weight: bold;
  color: #222;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.collapse-btn,
.expand-btn {
  background: #f5f7fa !important;
  border: 1.5px solid #409eff !important;
  color: #409eff !important;
  box-shadow: 0 2px 8px #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border 0.2s;
}
.collapse-btn .el-icon {
  font-size: 18px !important;
}
.expand-btn .el-icon {
  font-size: 22px !important;
}
.collapse-btn:hover,
.expand-btn:hover {
  background: #409eff !important;
  color: #fff !important;
  border-color: #409eff !important;
}
.expand-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.tools-section {
  margin-top: 10px;
  padding: 0 20px 10px 20px;
}
.tool-btn {
  width: 100%;
  font-size: 15px;
  border-radius: 8px;
  margin-bottom: 8px;
}
.actions-section {
  padding: 0 20px 0 20px;
}
.actions-title {
  font-size: 14px;
  color: #888;
  margin: 12px 0 4px 0;
}
.actions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.action-card {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 12px 16px;
  color: #222;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.action-card:hover {
  background: #e6f0ff;
  color: #409eff;
}
.faq-section {
  margin-top: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}
.faq-title {
  font-size: 14px;
  color: #888;
  margin: 12px 0 4px 0;
}
.faq-list {
  flex: 1;
}
.faq-item {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
  cursor: pointer;
  font-size: 15px;
}
.faq-item:last-child {
  border-bottom: none;
}
</style> 